<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
        <link rel="stylesheet" href="../css/mui.css">
        <link rel="stylesheet" href="./css/atom-one-light.css">
        <link rel="stylesheet" href="./css/demo-common.css">
        <script src="./js/jquery-2.2.3.min.js"></script>
        <script src="./js/jquery.validate.js"></script>
        <script src="./js/highlight.pack.js"></script>
        <script src="../js/datetimepicker.js"></script>
        <script src="../js/select.js"></script>
        <style>
        </style>
    </head>
    <body>
        <h3>Form表单</h3>

        <h4>基本实例</h4>
        <section>
            <div class="example">
                <p><mark>.form-row</mark>代表表单的行。</p>
                <p>给文本框等需要占满宽度的元素添加类名<mark>.form-control</mark>。</p>
                <p>将表单元素置于<mark>.form-control-wrapper</mark>内。</p>
                <p>给<mark>.form-label</mark>添加类<mark>.required</mark>以显示必填星号。</p>
                <br>
                <p>如果不使用栅格布局，你需要通过内联样式或外部css使表单元素对齐。</p>
                <br>
                <form>
                    <div class="form-row">
                        <label class="form-label" style="width: 100px">Name:</label>
                        <span class="form-text">Jim Green</span>
                    </div>
                    <div class="form-row">
                        <label class="form-label required" style="width: 100px">Age:</label>
                        <div class="form-control-wrapper" style="width: 280px">
                            <input type="text" name="age" class="form-control">
                            <span class="form-help">Here is some help text.</span>
                        </div>
                    </div>
                    <div class="form-row">
                        <label class="form-label required" style="width: 100px">Gender:</label>
                        <div class="form-control-wrapper">
                            <div class="radio-group">
                                <label class="radio">
                                    <input type="radio" name="sex" value="m">
                                    <span>Male</span>
                                </label>
                                <label class="radio">
                                    <input type="radio" name="sex" value="w">
                                    <span>Female</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <label class="form-label" style="width: 100px">Address:</label>
                        <div class="form-control-wrapper" style="width: 280px">
                            <textarea name="addr" class="form-control"></textarea>
                        </div>
                    </div>
                    <div class="form-action">
                        <span class="btn btn-primary btn-medium" style="margin-left: 100px">Submit</span>
                    </div>
                </form>
            </div>
            <pre class="html"><code>
    &lt;form&gt;
        &lt;div class="form-row"&gt;
            &lt;label class="form-label" style="width: 100px"&gt;Name:&lt;/label&gt;
            &lt;span class="form-text"&gt;Jim Green&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="form-row"&gt;
            &lt;label class="form-label required" style="width: 100px"&gt;Age:&lt;/label&gt;
            &lt;div class="form-control-wrapper" style="width: 280px"&gt;
                &lt;input type="text" name="age" class="form-control"&gt;
                &lt;span class="form-help"&gt;Here is some help text.&lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-row"&gt;
            &lt;label class="form-label required" style="width: 100px"&gt;Gender:&lt;/label&gt;
            &lt;div class="form-control-wrapper"&gt;
                &lt;div class="radio-group"&gt;
                    &lt;label class="radio"&gt;
                        &lt;input type="radio" name="sex" value="m"&gt;
                        &lt;span&gt;Male&lt;/span&gt;
                    &lt;/label&gt;
                    &lt;label class="radio"&gt;
                        &lt;input type="radio" name="sex" value="w"&gt;
                        &lt;span&gt;Female&lt;/span&gt;
                    &lt;/label&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-row"&gt;
            &lt;label class="form-label" style="width: 100px"&gt;Address:&lt;/label&gt;
            &lt;div class="form-control-wrapper" style="width: 280px"&gt;
                &lt;textarea name="addr" class="form-control"&gt;&lt;/textarea&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-action"&gt;
            &lt;span class="btn btn-primary btn-medium" style="margin-left: 100px"&gt;Submit&lt;/span&gt;
        &lt;/div&gt;
    &lt;/form&gt;         
            </code></pre>
        </section>

        <h4>栅格布局</h4>
        <section>
            <div class="example">
                <p>你可以在表单内使用栅格布局。</p>
                <br>
                <form style="width: 400px">
                    <div class="form-row">
                        <label class="form-label col-3">Name:</label>
                        <span class="form-text col-9">Jim Green</span>
                    </div>
                    <div class="form-row">
                        <label class="form-label col-3 required">Age:</label>
                        <div class="form-control-wrapper col-9">
                            <input type="text" name="age" class="form-control">
                        </div>
                    </div>
                    <div class="form-row">
                        <label class="form-label col-3">Address:</label>
                        <div class="form-control-wrapper col-9">
                            <textarea name="addr" class="form-control"></textarea>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-control-wrapper col-9 col-offset-3">
                            <label class="checkbox">
                                <input type="checkbox" name="agree">
                                <span>I have read the agreements.</span>
                            </label>
                        </div>
                    </div>
                    <div class="form-action">
                        <div class="col-9 col-offset-3">
                            <input type="reset" class="btn btn-default btn-medium" value="Reset">
                            <span class="btn btn-primary btn-medium">Submit</span>
                        </div>
                    </div>
                </form>
            </div>
            <pre><code>
    &lt;form style="width: 400px"&gt;
        &lt;div class="form-row"&gt;
            &lt;label class="form-label col-3"&gt;Name:&lt;/label&gt;
            &lt;span class="form-text col-9"&gt;Jim Green&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="form-row"&gt;
            &lt;label class="form-label col-3 required"&gt;Age:&lt;/label&gt;
            &lt;div class="form-control-wrapper col-9"&gt;
                &lt;input type="text" name="age" class="form-control"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-row"&gt;
            &lt;label class="form-label col-3"&gt;Address:&lt;/label&gt;
            &lt;div class="form-control-wrapper col-9"&gt;
                &lt;textarea name="addr" class="form-control"&gt;&lt;/textarea&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-row"&gt;
            &lt;div class="form-control-wrapper col-9 col-offset-3"&gt;
                &lt;label class="checkbox"&gt;
                    &lt;input type="checkbox" name="agree"&gt;
                    &lt;span&gt;I have read the agreements.&lt;/span&gt;
                &lt;/label&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-action"&gt;
            &lt;div class="col-9 col-offset-3"&gt;
                &lt;input type="reset" class="btn btn-default btn-medium" value="Reset"&gt;
                &lt;span class="btn btn-primary btn-medium"&gt;Submit&lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/form&gt;
            </code></pre>
        </section>

        <h4>多列表单</h4>
        <section>
            <div class="example">
                <form style="width: 600px">
                    <div class="form-row">
                        <label class="form-label col-2">Name:</label>
                        <span class="form-text col-4">Jim Green</span>
                        <label class="form-label col-2">Age:</label>
                        <div class="form-control-wrapper col-4">
                            <input type="text" name="age" class="form-control">
                        </div>
                    </div>
                    <div class="form-row">
                        <label class="form-label col-2">Birth:</label>
                        <div class="form-control-wrapper col-4">
                            <span class="input-wrapper form-control">
                                <input type="text" name="birth" id="birth">
                                <i class="fa fa-calendar input-right-icon"></i>
                            </span>
                        </div>
                        <label class="form-label col-2">Phone:</label>
                        <div class="form-control-wrapper col-4">
                            <span class="input-group form-control">
                                <input type="text" value="010" style="width:30%" readonly>
                                <input type="text" style="width:70%">
                            </span>
                        </div>
                    </div>
                    <div class="form-row">
                        <label class="form-label col-2">Address:</label>
                        <div class="form-control-wrapper col-10">
                            <textarea name="addr" class="form-control"></textarea>
                        </div>
                    </div>
                    <div class="form-action">
                        <div class="col-10 col-offset-2">
                            <span class="btn btn-primary btn-medium">Submit</span>
                        </div>
                    </div>
                </form>
            </div>
            <pre class="html"><code>
    &lt;form style="width: 600px"&gt;
        &lt;div class="form-row"&gt;
            &lt;label class="form-label col-2"&gt;Name:&lt;/label&gt;
            &lt;span class="form-text col-4"&gt;Jim Green&lt;/span&gt;
            &lt;label class="form-label col-2"&gt;Age:&lt;/label&gt;
            &lt;div class="form-control-wrapper col-4"&gt;
                &lt;input type="text" name="age" class="form-control"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-row"&gt;
            &lt;label class="form-label col-2"&gt;Birth:&lt;/label&gt;
            &lt;div class="form-control-wrapper col-4"&gt;
                &lt;span class="input-wrapper form-control"&gt;
                    &lt;input type="text" name="birth" id="birth"&gt;
                    &lt;i class="fa fa-calendar input-right-icon"&gt;&lt;/i&gt;
                &lt;/span&gt;
            &lt;/div&gt;
            &lt;label class="form-label col-2"&gt;Phone:&lt;/label&gt;
            &lt;div class="form-control-wrapper col-4"&gt;
                &lt;span class="input-group form-control"&gt;
                    &lt;input type="text" value="010" style="width:30%" readonly&gt;
                    &lt;input type="text" style="width:70%"&gt;
                &lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-row"&gt;
            &lt;label class="form-label col-2"&gt;Address:&lt;/label&gt;
            &lt;div class="form-control-wrapper col-10"&gt;
                &lt;textarea name="addr" class="form-control"&gt;&lt;/textarea&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-action"&gt;
            &lt;div class="col-10 col-offset-2"&gt;
                &lt;span class="btn btn-primary btn-medium"&gt;Submit&lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/form&gt;
            </code></pre>
        </section>

        <h4>表单校验</h4>
        <section>
            <div class="example">
                <p>你可以使用 <a href="https://jqueryvalidation.org/">jQuery-Validate</a> 插件进行表单校验。</p>
                <p>注意：MUI不包括jQuery-Validate，如果需要使用请单独引入。</p>
                <br>
                <form id="my-form" style="width: 300px">
                    <div class="form-row">
                        <label class="form-label required col-3">姓名：</label>
                        <div class="form-control-wrapper col-9" style="width: 280px">
                            <input type="text" name="name" class="form-control">
                        </div>
                    </div>
                    <div class="form-row">
                        <label class="form-label required col-3">年龄：</label>
                        <div class="form-control-wrapper col-9" style="width: 280px">
                            <input type="text" name="age" class="form-control">
                        </div>
                    </div>
                    <div class="form-action">
                        <div class="col-9 col-offset-3">
                            <span class="btn btn-primary btn-medium" id="submit">提交</span>
                        </div>
                    </div>
                </form>
            </div>
        <pre class="html"><code>    &lt;!-- html --&gt;
    &lt;form id="my-form" style="width: 300px"&gt;
        &lt;div class="form-row"&gt;
            &lt;label class="form-label required col-3"&gt;姓名：&lt;/label&gt;
            &lt;div class="form-control-wrapper col-9" style="width: 280px"&gt;
                &lt;input type="text" name="name" class="form-control"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-row"&gt;
            &lt;label class="form-label required col-3"&gt;年龄：&lt;/label&gt;
            &lt;div class="form-control-wrapper col-9" style="width: 280px"&gt;
                &lt;input type="text" name="age" class="form-control"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-action"&gt;
            &lt;div class="col-9 col-offset-3"&gt;
                &lt;span class="btn btn-primary btn-medium" id="submit"&gt;提交&lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/form&gt;</code></pre>
            <pre class="javascript"><code>    // javascript
    var validator = $('#my-form').validate({
        rules: {
            name: 'required',
            age: 'required'
        },
        messages: {
            name: {
                required: '请输入姓名'
            },
            age: {
                required: '请输入年龄'
            }
        }
    });

    $('#submit').on('click', function(e) {
        validator.form();
    });</code></pre>
        </section>

        <script>
        $(document).ready(function() {
            $('pre code').each(function(i, block) {
                hljs.highlightBlock(block);
            });
        });

        $('#birth').datetimepicker();

        var validator = $('#my-form').validate({
                rules: {
                name: 'required',
                age: 'required'
            },
            messages: {
                name: {
                    required: '请输入姓名',
                },
                age: {
                    required: '请输入年龄',
                }
            }
        });

        $('#submit').on('click', function(e) {
            validator.form();
        });
        </script>
    </body>
</html>